<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- <style>
    *{
      margin: 0;
      padding: 0;
    }
    table{
      border: 1px solid red;
      margin: 30px auto;
      border-collapse: collapse;
    }
    td{
      width: 30px;
      border: 1px solid red;
      width: 100px;
      text-align: center; 
    }
    th{
      border: 1px solid red;
    }
  </style> -->
</head>
<body>
  <!-- <div class="box" age="18"></div>
  <script>
    var div = document.querySelector('div');
    //获取自定义属性值：
    console.log(div.getAttribute('age')); // 结果 18
    console.log(div.getAttribute('class')); // 结果 box
  </script> -->
<!-- <div class="box" age="18"></div>
<script>
  //给标签设置自定义属性，和自定义属性对应的值
  var div = document.querySelector('div');
  div.setAttribute('wj','你好');
  div.setAttribute('style','color:red');
  console.log(div)
</script> -->
<!-- <div class="box" age="18"></div>
<script>
  //给标签移除属性
  var div  = document.querySelector('div');
  div.removeAttribute('age');//移除自定义属性
  div.removeAttribute('class');//移除系统自带属性
  console.log(div)
</script> -->

<!-- 通过js的getAttribute()方法获取 H5方法设置的自定义属性 -->
<!-- <div class="box" data-age="18" data-gender="男"></div>
<script>
var div = document.querySelector('div');
//通过js的getAttribute()方式获取到H5方法设置的自定义属性
console.log(div.getAttribute('data-age')); //结果 18
</script> -->

<!-- 通过H5 保存为 dataset对象 的方法获取去H5自定的的属性 -->
<!-- <div data-age="18"></div>
<script>
  var div = document.querySelector('div');
  //通过div.dataset 获取到该标签身上所有的自定义属性
  console.log(div.dataset) 
  console.log(div.dataset.age) //结果 18
  var obj = div.dataset;
  console.log(obj.age); //结果 18
  console.log(obj['age'])//结果 18
</script> -->

<!-- <div></div>
<script>
  var div = document.querySelector('div');
  //使用H5的方法dataset 给标签设置自定义属性
  div.dataset.age = '18';
  console.log( div.dataset.age );//18
  div.dataset['gender'] = '男';
  console.log( div.dataset.gender );//男
  console.log( div.dataset['gender']);//男
  console.log(div)
  //删除自定义属性名
  div.dataset.name = "小笨蛋";
  //删除方法一
  delete div.dataset.name;
  //删除方法二
  delete div.dataset['name'];
</script> -->
  <!-- 通过文档树操作页面中的标签(元素，节点)-->
  <!-- <ul>
    <li>我是第一个子元素/子节点</li>
    <li>我是第二个子元素/子节点</li>
    <li>我是第三个子元素/子节点</li>
  </ul>
  <script>
    //通过文档树方式获取页面中元素(节点)，判断该节点中是否包含子节点
    var ul = document.querySelector('ul');
    //判断该节点是否包含子元素(子元素);
    alert(ul.hasChildNodes())
  </script> -->
  <!-- <ul>
    <li>我是第一个子元素/子节点</li>
    <li>我是第二个子元素/子节点</li>
    <li>我是第三个子元素/子节点</li>
  </ul>
  <script>
    var ul = document.querySelector('ul');
    //通过父元素 中的children来判断是否含有子元素，通过ul.children.length来判断是否有子元素
    console.log(ul.children)//返回值是一个素有子元素的伪数组
    var test = ul.children
    for(var i = 0; i < test.length; i++){
      console.log(test[i]);//通过遍历数组的方式获取到 数组中的每个标签元素
    }
  </script> -->
  <!-- <ul>

    <li>我是第一个子元素/子节点</li>

    <li>我是第二个子元素/子节点</li>

    <li>我是第三个子元素/子节点</li>

  </ul>
  <script>
    var ul =  document.querySelector('ul');
    //获取父元素中的子节点
    console.log(ul.childNodes)
  </script> -->
  <!-- <ul>
    <li>我是第一个子元素/子节点</li>
    <li>我是第二个子元素/子节点</li>
    <li>我是第三个子元素/子节点</li>
  </ul>
  <script>
    var ul = document.querySelector('ul');
    //获取父元素中第一个子元素
    console.log(ul.firstElementChild)
    //获取父元素中最后一个子元素
    console.log(ul.lastElementChild)
  </script> -->
  <!-- <ul>
    <li>我是第一个子元素/子节点</li>
    <li>我是第一个子元素/子节点</li>
    <li>我是第一个子元素/子节点</li>
  </ul>
  <script>
    var ul = document.querySelector('ul');
    //获取父元素中的第一个子节点
    console.log(ul.firstChild)
    //获取父元素中的最后一个子节点
    console.log(ul.lastChild)
  </script> -->
  <!-- <script>
    var body = document.body
    console.log(body)
  </script> -->

  <!-- 根据子元素获取对应的父元素 -->
  <!-- <div class="one">
    <div class="two">
      <p>我是子元素</p>
    </div>
  </div>
  <script>
    //常规方式 js方式获取页面中的标签
    var p = document.querySelector('p');
    console.log(p)

    //dom树方法获取 p标签
    var p_two = document.body.firstElementChild.firstElementChild.firstElementChild
    console.log(p_two)

    //通过子元素获取其父元素(父节点)
    var node = p.parentNode;
    console.log(node);//获取到的是 p元素(标签)的直接父元素two
    console.log(node.parentNode);//获取到的是 two元素(标签)的直接父元素one

    var node_ = p.parentNode.parentNode;
    console.log(node_);//获取到的是 two元素(标签)的直接父元素one
  </script> -->

  <!-- 获取兄弟节点 -->
  <!-- <ul>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
    <li>第四个</li>
  </ul>
  <script>
    var ul = document.querySelector('ul');
    var lis = ul.children;
    //获取下一个兄弟元素(节点)
    if(lis.length>0){
      var element = lis[1].nextElementSibling;
      console.log(element);

      var element1 = lis[1].nextSibling;
      console.log(element1);
    }else{
      alert('未找到该元素');
    }
  </script> -->
  <!-- 获取兄弟节点(元素) -->
  <!-- <ul>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
    <li>第四个</li>
  </ul>
  <script>
    var ul = document.querySelector('ul');
    var lis = ul.children;
    //获取上一个兄弟节点
    var element = lis[1].previousElementSibling;
    console.log(element);
    var element1 = lis[1].previousSibling;
    console.log(element1);
  </script> -->
  <!-- 获取节点的类型 使用nodeType属性-->
  <!-- <ul>
    <li>我是第一个</li>
    <li>我是第二个</li>
    <li>我是第三个</li>
    <li>我是第四个</li>
  </ul>
  <script>
    var lis = document.querySelectorAll('li');
    console.log(lis[0].nodeType);//返回值是1 当前节点是一个标签元素

    var ul = document.querySelector('ul');
    var lis1 = ul.childNodes;
    console.log(lis1[0].nodeType);//返回值是3 当前节点是一个空文本(空格 回车符等)
  </script> -->
  <!-- 获取节点的名称 使用nodeName属性 -->
  <!-- <ul>
    <li>我是第一个</li>
    <li>我是第二个</li>
    <li>我是第三个</li>
    <li>我是第四个</li>
  </ul>
  <script>
    var lis = document.querySelectorAll('li');
    console.log(lis[0].nodeName);//获取到 大写的 LI

    var ul = document.querySelector('ul');
    var lis0 = ul.firstChild;//获取父元素中的第一个子节点(包括回车符 空格等)
    console.log(lis0.nodeName);//获取到空文本 #text
  </script> -->
  <!-- 获取文本节点中的值 使用nodeValue属性 只能获取到文本节点中的值 不能获取到标签中的值(内容)-->
  <!-- <ul>
    你好
    <li>我是第一个</li>
    <li>我是第二个</li>
    <li>我是第三个</li>
    <li>我是第四个</li>
  </ul>
  <script>
    var lis = document.querySelectorAll('li');
    console.log(lis[0].nodeValue);//获取不到 为null

    var ul = document.querySelector('ul');
    lis = ul.childNodes;
    console.log(lis[0].nodeValue);//获取到了 回车或空格 文本信息之类的
  </script> -->
  
<!-- 动态创建元素 非主流 了解-->
<!-- <script>
  //通过document.write()方法在html页面中动态创建标签
  document.write("<h1>通过document.write创建的h1标签显示在页面上</h1>")
</script> -->
<!-- 点击会出现弹出框 之前是弹出框使用 document.write 动态创建的 但是这个更改了(了解下吧) -->
<!-- <a id="ibangkf" href="http://www.ibangkf.com">在线客服系统</a>
<script type="text/javascript" src="http://c.ibangkf.com/i/c-test123-456.js"></script> -->

<!-- <script>
  var body = document.body;
  console.log(body)
  //通过dom.innerHTML属性在html页面中动态创建标签
  body.innerHTML = '<p>我是一个段落</p>';
</script> -->

<!-- 通过document.createElement()方法在html页面中动态创建标签 -->
<!-- <script>
  //第一步 通过document.createElement()方法可以在内存中创建一个标签
  var div = document.createElement('div');
    div.style.width = '200px';
    div.style.height = '300px';
    div.style.backgroundColor = 'pink';
  //第二步 记得将创建好的标签元素添加到文档数中
  var body = document.querySelector('body');
    body.appendChild(div);
</script> -->
<!-- 点击一个按钮 动态创建一个无序列表 -->
<!-- <input type="button" value="点击创建元素">
<script>
  var btn = document.querySelector('input');
  var body = document.querySelector('body');
  btn.onclick = function(){
    var ul = document.createElement('ul');
    var li = document.createElement('li');
    li.innerText = '我是动态创建的li'
    ul.appendChild(li);
    body.appendChild(li);
  }
</script> -->
<!-- <input type="button" value="点击创建元素">
<script>
  var btn = document.querySelector('input');
  var body = document.querySelector('body');
  btn.onclick = function(){
    var ul = document.createElement('ul');
    for(var i = 0; i < 3; i++){
      var li = document.createElement('li');
      li.innerText = '你好'+i;
      ul.appendChild(li);
    }
    body.appendChild(ul)
  }
</script> -->
<!-- <table>
    <tr>
      <th>昵称</th>
      <th>操作</th>
    </tr>
    <tr>
      <td>小可爱</td>
      <td><a href="#">删除</a></td>
    </tr>
    <tr>
      <td>老妖精</td>
      <td><a href="#">删除</a></td>
    </tr>
  </table>
  <script>
    //通过removeChild()方法删除子元素(标签)
    var table = document.querySelector('table');
    var tbody = document.querySelector('tbody')
    var a_del = document.querySelectorAll('a');
    for(var i = 0; i < a_del.length; i++){
      a_del[i].onclick = function(){
        console.log(this.parentNode.parentNode)//打印结果是tr整行 
        tbody.removeChild(this.parentNode.parentNode);
      }
    }
  </script> -->
<!-- 创建元素的其他方式 appendChild()方法将创建的元素追加到 父元素的末尾-->
<!-- <ul>
  <li>我是第一个li</li>
</ul>
<script>
  var ul = document.querySelector('ul');
  var li = document.createElement('li');
  li.innerText = '我是创建的元素';
  ul.appendChild(li); //appedChild()方法 是将动态创建的元素添加到这个父元素的末尾
</script> -->

<!-- 动态创建元素的其他方式 insertBefore(new,old)方法 -->
<!-- <ul>
  <li>我是第一个li</li>
</ul>
<script>
  var ul = document.querySelector('ul');
  var li_new = document.createElement('li');
  li_dong.innerText = '我是动态创建的元素li标签'

  var li_old = document.querySelector('li')
  ul.insertBefore(li_new,li_old);
</script> -->

<!-- 动态创建元素的其他方式 replaceChild(new,old)方法 替换掉之前老的元素-->
<!-- <ul>
  <li>我是第一个li老的元素</li>
</ul>
<script>
  var ul = document.querySelector('ul');
  var li_old = document.querySelector('li');
  var p_new = document.createElement('p');
  p_new.innerText = '我是动态创建的a标签'
  ul.replaceChild(p_new,li_old);
  console.log(p_new)
</script> -->

<!-- 动态创建元素的其他方式 cloneNode()方法 克隆/复制一个元素(标签)-->
<!-- <ul>
  <li>我是第一个li</li>
  <li><img src="" alt=""></li>
</ul>
<script>
  var ul = document.querySelector('ul');
  var li_one = document.querySelector('li:nth-child(1)');
  var li_two = document.querySelector('li:nth-child(2)');
  console.log(ul.cloneNode(false));
  console.log(ul.cloneNode(true));
  console.log(li_one.cloneNode(false));
  console.log(li_one.cloneNode(true));
  console.log(li_two.cloneNode(false));
  console.log(li_two.cloneNode(true));
</script> -->
<!-- 输入框事件 oninput -->
<!-- <input type="text">
<span></span>
<script>
  var input = document.querySelector('input');
  var span = document.querySelector('span');
  input.oninput = function(){
    span.innerText = this.value;
  }
</script> -->

</body>
</html> 